<template>

    <div class="xk_fl">
        <dl>
            <dt>分　　类：</dt>
            <dd>
                <a v-for="(cate,index) in cateList" :key="cate.id" @click.prevent="cateClick(index,cate.id)"  :class="{'xk_click':cateSelectId===cate.id}" >{{cate.name}}</a>
            </dd>
        </dl>
        <dl v-if="subCateList.length>0">
            <dt>科　　目：</dt>
            <dd>
                <a  v-for="(subCate,index) in  subCateList" :key="subCate.id" @click.prevent="subCateClick(index,subCate.id)" :class="{'xk_click':subjectSelectId===subCate.id}">{{subCate.name}}</a>

            </dd>
        </dl>
        <dl>
            <dt>授课方式：</dt>
            <dd>
                <a v-for="type in teachType" :key="type.code" @click="teachTypeClick(type.code)" :class="{'xk_click':typeSelectId===type.code}">{{type.name}}</a>
            </dd>
        </dl>
    </div>

</template>
<script>

    export default {
        name:'CategoryNav',
        props: {
            categories:{
                type:Array,
                default:function () {
                        return []
                }
            },
            initCateId:{
                type:Number,
                default:function () {
                    return 0
                }
            },
            teachType:{
                type:Array,
                default:function () {
                    return [
                        { name:'全部',code:0},
                        { name:'录播',code:1},
                        { name:'直播',code:2},
                        { name:'面授',code:3},
                    ]
                }
            },
            typeId:{
                type:Number,
                default:0
            }
        },
        data:function () {
            return {
                //当前选择的一级分类
                cateSelectId:0,
                //当前选择的二级分类ID
                subjectSelectId:0,
                //当前选择的授课方式
                typeSelectId:0,
                cateList:[],
                subCateMap:{}
            }
        },
        computed:{
            //查询条件
            queryParams:function(){
                return {
                    cateId:this.subjectSelectId>0 ? this.subjectSelectId:(this.cateSelectId>0?this.cateSelectId:0),
                    teachType:this.typeSelectId
                }
            },
            subCateList:function () {
                let subCateList= this.subCateMap[this.cateSelectId]
                return subCateList?subCateList:[]
            }
        },
        methods:{
            cateClick:function (idx,cateId) {
                this.cateSelectId = cateId
                this.subjectSelectId =0
                //发出查询条件变化的事件
                this.$emit('changeParams',this.queryParams)
                //处理点击分类后路由
                if(cateId>0){
                    this.$router.push('/list-'+cateId)
                }else{
                    this.cateSelectId=0
                    this.$router.push('/list')
                }

            },
            subCateClick:function (index,subCateId) {
                this.subjectSelectId = subCateId
                //发出查询条件变化的事件
                this.$emit('changeParams',this.queryParams)
                //处理点击科目后路由
                if(subCateId>0){
                    this.$router.push('/list-'+subCateId)
                }else if(this.cateSelectId>0){
                    this.$router.push('/list-'+this.cateSelectId)
                }else{
                    this.$router.push('/list')
                }

            },
            teachTypeClick:function (typeCode) {
                this.typeSelectId = typeCode
                //发出查询条件变化的事件
                this.$emit('changeParams',this.queryParams)
            }
        },
        watch:{
            categories:function () {
                if(this.categories && this.categories.length>0){
                    this.cateList.clear
                    this.cateList.push({name:'全部',id:0})
                    this.subCateMap[0]=[{name:'全部',id:0}]
                    this.categories.forEach((cate)=>{
                        this.cateList.push({name:cate.name,id:cate.id})
                        if(this.initCateId===cate.id){
                            this.cateSelectId=cate.id
                        }

                        this.subCateMap[cate.id]=[{name:'全部',id:0}]
                        cate.subjectList.forEach((subCate)=>{
                            this.subCateMap[cate.id].push({name:subCate.name,id:subCate.id})
                            if(this.initCateId===subCate.id){
                                this.subjectSelectId= subCate.id
                                this.cateSelectId = cate.id
                            }
                        })
                    })
                }
                this.$emit('changeParams',this.queryParams)
            }
        }
    }


</script>

<style>

</style>